<template>
	<view class="assCon">
		<view class="u-navbar">
			<view class="u-back-icon" @tap="goBack"><my-icon name="back" size="28upx" style="color: #363940;"></my-icon></view>
			<view class="u-navbar-content-title">
				<view class="u-title u-line-1">管理助手</view>
				<!-- <view class="srot" @click="goLink('setClock')"><image src="../../static/setTop.png"></image></view> -->
			</view>
		</view>
		<view>
			<view class="titTipBox" v-if="list" v-for="(item,index) in list" :key="index">
				<view class="titTipView"><view class="titTip">{{item.createTime}}</view></view>
				<template v-if="item.type==1" >
				<view class="tipCon">
					<view class="tipConTit">
						<view class="tipPoint"></view>
						<text>学生在线统计周报</text>
					</view>
					<view class="tipView">
						<view class="tipMid">
							<view class="midImg">
								<image src="../../static/online/line2.png"></image>
								<text>{{item.onlineUsers}}</text>
							</view>
							<view class="midNode">系统登录人数</view>
						</view>
						<view class="tipMid" style="margin-right: 0;">
							<view class="midImg">
								<image src="../../static/online/line1.png"></image>
								<text style="color:#8F67FF">{{item.onlineTime}}</text>
							</view>
							<view class="midNode">
								在线总时长
								<text>({{item.onlineTimeUnit}})</text>
							</view>
						</view>
					</view>
				</view>
				</template>
				<template  v-if="item.type==2" >
					<view class="tipCon">
						<view class="tipConTit">
							<view class="tipPoint"></view>
							<text>学情分析周报</text>
							<view class="tipIcon"  @click="dropShow=!dropShow"><my-icon name="morePoint"></my-icon></view>
							<view class="srotDrown" v-if="dropShow">
								<view hover-class="hover" @click="dropListClick(index,item.type)" v-for="(item,index) in dropList" :key="index">{{item.name}}</view>
							</view>
						</view>
						<view class="tipView">
							<view class="datailBot">
								<view class="detailView">
									<my-icon name="zhangjie"></my-icon>
									<text>
										练习章节总数：
										<text class="bold">{{item.chapters}}</text>
									</text>
								</view>
								<view style="width: 40%;" class="detailView">
									<text>
										题目总数：
										<text class="bold">{{item.ques}}</text>
									</text>
								</view>
								<view class="detailView">
									<my-icon name="datishu"></my-icon>
									<text>
										学习课件总数：
										<text class="bold">{{item.courses}}</text>
									</text>
								</view>
								<view style="width: 40%;" class="detailView">
									<text>
										总时长<text class="nodeGray">({{item.studyTimeUnit}})</text>：
										<text class="bold">{{item.studyTime}}</text>
									</text>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-if="item.type==3">
					<view class="tipCon" style="padding-bottom: 0;" @click="reportTo(item.reportCartId,item.reportCardType)">
						<view class="tipConTit">
							<text>成绩单通知</text>
						</view>
						<view class="tipNews">{{item.reportCard}}</view>
						<view class="tipNewsMore">查看详情</view>
					</view>
				</template>
			</view>
		</view>
			<my-empty v-if="emptyFalse" emptyTit="暂无信息"></my-empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info:{},
			list:[],
			dropShow:false,//下拉筛选
			dropList:[{name:'练习详情',type:0},{name:'学习详情',type:1}],
			dropChose:0,//默认选择第一个
			emptyFalse:false
		};
	},
	onLoad(){
		this.init()
	},
	methods: {
		init(){
			this.info={};
			return this.getInfo()
		},
		dropListClick(index,type){
			this.dropShow=false;
			if(type==0){
				uni.navigateTo({
					url:'../practiceState/practiceState'
				})
			}else{
				uni.navigateTo({
					url:'../studyProgress/studyProgress'
				})
			}
		},
		reportTo(id,type){
			const posid=type?'examid':'paperid'
			uni.navigateTo({
				url:`../examAnalysis/examDetails?${posid}=${id}`
			})
		},
		getInfo(){
			const pageData={
				'pageNo':1
			}
			//课程列表
			return new Promise((resolve, reject) => {
				  this.request
					.post('/app/teacher/home/manageAssiList',pageData)
					.then(res => {
						this.info=res;
						this.list=res.list;
						this.emptyFalse=this.list.length>0?false:true
						resolve();
					})
			});
		},
		// 返回
		goBack(){
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>
<style>
page {
	background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.assCon{
	padding-bottom: 40upx;
}
.u-title {
	text-align: center;
	font-size: 32upx;
}
.u-navbar {
	background: #fff !important;
	line-height: 44px;
	padding-top: 44upx;
	position: fixed;
	width: 100%;
	z-index: 999;
}
.u-navbar-content-title {
	position: relative;
	background: #fff;
}
.u-back-icon {
	position: absolute;
	padding: 0 30upx;
	z-index: 10;
}
.tipNews{
	color: #6B7180;
	font-size: 30upx;
	margin-top: 59upx;
}
.tipNewsMore{
	color: #363940;
	font-size: 32upx;
	height: 100upx;
	line-height: 100upx;
	margin-top: 59upx;
	border-top:1px solid #ebebeb;
}
.srot {
	position: absolute;
	right: 30upx;
	top: 0;
	color: #fff;
	font-size: 30upx;
	z-index: 100;
	image {
		width: 36upx;
		height: 34upx;
	}
}
.nodeGray{
	color: #A6A6A6!important;
}
.tipView {
	display: flex;
	justify-content: center;
	margin: 50upx auto 0;
}
.titTipView{
	display: flex;
	justify-content: center;
}
.titTipBox:first-child{
	padding-top: 133upx;
}
.titTip {
	background: #fff;
	height: 40upx;
	line-height: 40upx;
	color: #a6a6a6;
	font-size: 26upx;
	border-radius: 6upx;
	padding: 0 15upx;
	margin: 40upx auto 30upx;
	text-align: center;
}
.tipCon {
	background: #fff;
	margin: 0 30upx;
	border-radius: 18upx;
	padding: 50upx 30upx;
	box-shadow: 0px 4upx 16upx 0px rgba(0,0,0,0.1);
	.tipConTit {
		display: flex;
		justify-content: start;
		align-items: center;
		font-size: 32upx;
		color: #363940;
		font-weight: 600;
		position: relative;
	}
	.tipPoint {
		background: rgba(249, 157, 46, 0.3);
		width: 30upx;
		height: 30upx;
		border-radius: 30upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20upx;
	}
	.tipPoint::before {
		content: '';
		display: block;
		width: 14upx;
		height: 14upx;
		border-radius: 14upx;
		background: #f99d2e;
	}
}
.tipMid {
	margin-right: 129upx;
	.midImg {
		position: relative;
		width: 176upx;
		height: 113upx;
		text-align: center;
		text {
			color: #4275f8;
			font-size: 38upx;
			font-weight: bold;
			line-height: 160upx;
		}
	}
	.midNode {
		color: #6b7180;
		font-size: 30upx;
		margin-top: 40upx;
		text {
			color: #a6a6a6;
		}
	}
	image {
		width: 176upx;
		height: 113upx;
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
	}
}
.datailBot {
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	.detailView{
		width: 60%;
		height: 35upx;
		display: flex;
		justify-content: start;
		align-items: center;
		margin-bottom: 30upx;
		.iconfont {
			font-size: 30upx;
			width: 34upx;
			color: transparent;
			margin-right: 19upx;
			margin-bottom: 0;
		}
		.icon-zhangjie{
			background: linear-gradient(to bottom,#ffd46c, #F99D2E);
			-webkit-background-clip: text;
		}
		.icon-datishu {
			background: linear-gradient(to bottom, #ae9fff, #8f67ff);
			-webkit-background-clip: text;
		}
		text {
			color: #6b7180;
			font-size: 30upx;
		}
		.bold {
			color: #363940;
			font-weight: 500;
		}
	}
}
.tipIcon{
	 margin-left: auto;
	 margin-right: -30upx;
	.iconfont{
		color: #A6A6A6;
		font-size: 22upx;
		transform: scale(.3);
	}
}
.srotDrown::before{
		content: '';
		display:block;
		width: 0;
		height: 0;
		border-left: 20upx solid transparent;
		border-right: 20upx solid transparent;
		border-bottom: 18upx solid #fff;
		margin-top: -18upx;
		float: right;
		margin-right: 10upx;
	}
	.srotDrown{
		background: #fff;
		position: absolute;
		right: 0upx;
		top: 55upx;
		width: 230upx;
		height: 199upx;
		text-align: center;
		border-radius: 14upx;
		box-shadow: 0px 4upx 16upx 0px rgba(0,0,0,0.1);
		font-size: 30upx;
		view{
			color: #363940;
			height: 100upx;
			width: 100%;
			font-weight: normal;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		view:nth-child(2){
			border-top: 1px solid #EBEBEB;
		}
	}
	.empty {
		height: 65%;
		top: auto;
		bottom: 0;
		background: none;
	}
</style>
